<template>
  <view class="mine_top">
    <view class="space-between" style="padding: 15rpx 2%;box-sizing: border-box;">
      <view class="center">
        <view><image :src="userInfo.avatar" mode=""></image></view>
        <view class="direction-start" style="color: #fff;height: 124rpx;justify-content:space-around;">
          <text>{{ userInfo.nickname }}</text>
          <text v-if="userInfo.mobile">{{ userInfo.mobile }}</text>
          <text class="buttum" @click="openPhonePad()" v-else>未绑定</text>
        </view>
      </view>
      <view @click="redirectTo('index/filling')"><uni-tag text="车友端" type="warning"></uni-tag></view>
    </view>
    <view class="package center" style="justify-content: space-around;padding: 30rpx 20rpx;">
      <view class="column" @click="navTo('Sale/prebook/reservation')">
        <text>{{ user.sub_nums }}</text>
        <text>预约</text>
      </view>
      <view class="column" @click="navTo('Sale/index/touch')">
        <text>{{ user.contact_nums }}</text>
        <text>触达</text>
      </view>
    </view>
  </view>
  <!-- 手机号面板弹框 -->
  <uni-popup ref="PhonePadPopup" type="bottom" :is-mask-click="false" style="z-index: 910">
    <PhonePad type="bind" @close="closePhonePad" />
  </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { redirectTo, navTo } from '@/utils/navigator';
import PhonePad from '@/components/common/PhonePad.vue';
import { useUserStore } from '@/stores/user';
import { toPublish } from '@/mqtt/main';
import { getPlugInfo } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
const plug_id = getDriverID();
// view
const userInfo = useUserStore();
const PhonePadPopup = ref(null);
const user = ref({});
onShow(() => {
  if (!userInfo.avatar) {
    userInfo.getUserInfo();
  }
});
init();
function init() {
  const payload = {
    query: getPlugInfo,
    variables: { plug_id },
  };
  toPublish('ql/plug/getPlugInfo', payload, (obj: any) => {
    const { data } = obj;
    user.value = data.getPlugInfo;
  });
}
/**
 * 打开绑定手机号码弹框
 */
function openPhonePad() {
  PhonePadPopup.value.open();
}
/**
 * 关闭绑定手机号码弹框
 */
function closePhonePad() {
  PhonePadPopup.value.close();
}
</script>

<style scoped lang="less">
.mine_top {
  width: 100%;
  background: linear-gradient(to bottom, #39a0ff, #fff);
  border-bottom-left-radius: 25%;
  border-bottom-right-radius: 25%;
}
.center {
  image {
    width: 124rpx;
    height: 124rpx;
    border-radius: 5px;
    margin-right: 15rpx;
  }
}
.buttum {
  width: 119rpx;
  height: 46rpx;
  text-align: center;
  line-height: 46rpx;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.4);
  font-size: 28rpx !important;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  border-radius: 5px;
}
</style>
